<template>
	<div class="withdraw-bank flex-1 flex flex-col">
		<div>
			<!--			<wallet-header class="!h-[50px]" />-->
			<wallet-select-bank
				class="mx-[35px]"
				:options="list"
				modifyClass="bg-bg-3  pl-[12px]"
				v-model:modelValue="bankValue" />
		</div>
		<div class="py-[29px] px-[35px] flex flex-col flex-1">
			<div class="flex justify-between items-center">
				<div>{{ $t('withdraw.amount') }}</div>
				<div class="text-t-2">
					{{ $t('withdraw.balance') }}:
					<up-amount class="ml-1" :value="balance" />
				</div>
			</div>
			<wallet-input-amount v-model:modelValue="amount" :max="balance" />
			<div class="mt-2 flex items-center">
				<div v-if="!limitError" class="mt-2 text-t-3">
					<div class="mr-2">
						{{ $t('withdraw.min') }}
						<up-amount class="ml-1" :value="bankInfo.minAmount" :precision="0" />
					</div>
					<div>
						{{ $t('withdraw.max') }}
						<up-amount style="margin-left: 4px" :value="bankInfo.maxAmount" :precision="0" />
					</div>
				</div>
				<div v-else class="text-danger">
					<base-icon name="mistake" size="15" class="mr-1" />
					<template v-if="+amount < +balance">
						{{ $t('withdraw.limitError') }}
						（
						<up-amount :value="bankInfo.minAmount"></up-amount>
						~
						<up-amount :value="bankInfo.maxAmount"></up-amount>
						）
					</template>
					<template v-else>
						{{ $t('recharge.limitError') }}

						(
						<up-amount :value="bankInfo.minAmount" />
						~
						<up-amount :value="bankInfo.maxAmount" />
						)
					</template>
				</div>
			</div>
			<div class="flex-1" />
			<div class="mt-2 mb-[28px]">
				<base-button
					type="primary"
					block
					round
					:disabled="submitDisabled"
					:loading="loading"
					@click="onSubmit">
					{{ $t('withdraw.submit') }}
				</base-button>
			</div>
			<div class="explain">
				<wallet-tip-desc type-code="WithdrawBank" />
			</div>
		</div>
		<bank-card-select v-model="bankCardSelectShow" @select="({ id }) => (addressId = id)" />

		<wallet-complete-dialog v-model="showDialog" />
	</div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { useWalletStore } from '@/store'
import { WalletType } from '@/enums'
import { getWithdrawFlatInfo, withdraw } from '@/api/wallet'
import { fmtMobile, showError, t } from '@/utils'
import { HTTP_CODES } from '@/constants'
import { UpAmount } from '@/components/up'
import { BaseButton, BaseIcon } from '@/components/base'
import WalletCompleteDialog from '@/views/wallet/components/wallet-complete-dialog.vue'
import BankCardSelect from '@/views/wallet/components/bank-card-select.vue'
import WalletTipDesc from '@/views/wallet/components/wallet-tip-desc.vue'
import WalletInputAmount from '@/views/wallet/components/wallet-input-amount.vue'
import { WalletAction } from '@/types'
import WalletSelectBank from '@/views/wallet/components/wallet-select-bank.vue'

// const router = useRouter()
const walletStore = useWalletStore()
const addressId = ref(walletStore.withdrawData.id)
const bankCardSelectShow = ref(false)
const amount = ref('')

const balance = computed(() => walletStore.balance)

const list: any = computed(() =>
	walletStore.cards.map((item: any) => ({
		id: item.id,
		text: item.bankName,
		content: fmtMobile(item.cardNumber),
		img: item.bankIcon,
		type: 'server'
	}))
)

const bankValue = ref(walletStore.withdrawData.id)

const limitError = computed(
	() =>
		amount.value &&
		(Number(amount.value) > balance.value ||
			Number(amount.value) < Number(bankInfo.value.minAmount) ||
			Number(amount.value) > Number(bankInfo.value.maxAmount))
)

const submitDisabled = computed(() => {
	return !amount.value || limitError.value
})

const withdrawAble = computed(() => walletStore.withdrawChannel.withdrawAble)

const showDialog = ref(false)

const loading = ref(false)
const onSubmit = async () => {
	try {
		loading.value = true
		// 因为金额到账到流水任务产品有一定的延迟，所以前端这里先做延迟 1000的提款处理
		setTimeout(async () => {
			// await store.dispatch('wallet/getWithdrawChannel')
			await walletStore.getWithdrawChannel()
			if (!withdrawAble.value) {
				showDialog.value = true
				loading.value = false
				return false
			}
			const amountValue = +amount.value
			const params = {
				type: WalletType.bank.id,
				walletId: addressId.value,
				balance: amountValue
			}
			await withdraw(params)
			// 提款完成之后立马清空输入框
			amount.value = ''
			loading.value = false
			walletStore.setWithdrawData({ resultId: WalletAction.withdraw.id, success: true })
			walletStore.setWithdrawResultPopupShow(true)
			walletStore.setWithdrawPopupShow(false)
		}, 1000)
	} catch (error: any) {
		loading.value = false
		if (error.code === HTTP_CODES.TurnoverNotAble) {
			// return showAlert({
			// 	message: t('httpCode[333]', { amount: fmtAmount(error.msg) })
			// })
			return showError(t('httpCode[333]', { amount: 'fmtAmount(error.msg)' }))
		}
		if (error.code !== HTTP_CODES.TurnoverNotAble) {
			showError(error)
		}
	}
}

const bankInfo = ref({
	maxAmount: 0,
	minAmount: 0
})

// const onInputChange = (val) => {
// 	console.log('val ', val)
// }

const getBankInfo = async () => {
	try {
		const { data } = await getWithdrawFlatInfo({
			accountId: addressId.value
		})
		bankInfo.value = data
	} catch (error: any) {
		showError(error)
	}
}

onMounted(() => {
	getBankInfo()
})
</script>
<style lang="scss" scoped></style>
